/* 订阅弹窗动画样式 */

/* 弹窗淡入淡出动画 */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modalFadeOut {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
}

/* 背景模糊淡入 */
@keyframes backdropFadeIn {
  from {
    opacity: 0;
    backdrop-filter: blur(0px);
  }
  to {
    opacity: 1;
    backdrop-filter: blur(4px);
  }
}

/* 图标旋转动画 */
@keyframes iconSpin {
  from {
    transform: rotate(0deg) scale(0);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  to {
    transform: rotate(360deg) scale(1);
  }
}

/* 滑入动画（从左侧） */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 弹入动画（从下方） */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 脉冲动画 */
@keyframes softPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* 成功检查标记动画 */
@keyframes checkmarkDraw {
  from {
    stroke-dasharray: 0 50;
  }
  to {
    stroke-dasharray: 50 0;
  }
}

/* 按钮悬停发光效果 */
@keyframes buttonGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1);
  }
}

/* 关闭按钮微妙脉冲 */
@keyframes closeButtonPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
}

/* 关闭按钮悬停发光 */
@keyframes closeButtonGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
  }
}

/* 工具类 */
.modal-enter {
  animation: modalFadeIn 0.3s ease-out forwards;
}

.modal-exit {
  animation: modalFadeOut 0.3s ease-out forwards;
}

.backdrop-enter {
  animation: backdropFadeIn 0.3s ease-out forwards;
}

.icon-spin-enter {
  animation: iconSpin 0.7s ease-out forwards;
}

.slide-in-left {
  animation: slideInLeft 0.5s ease-out forwards;
}

.slide-in-up {
  animation: slideInUp 0.5s ease-out forwards;
}

.soft-pulse {
  animation: softPulse 2s ease-in-out infinite;
}

.button-glow {
  animation: buttonGlow 2s ease-in-out infinite;
}

.close-button-pulse {
  animation: closeButtonPulse 3s ease-in-out infinite;
}

.close-button-glow:hover {
  animation: closeButtonGlow 1s ease-in-out infinite;
}